<template>
    <div>
        <el-row style="margin-top:10px">
            <el-col :span="24">
                <el-table
                        ref="multipleTable"
                        stripe
                        :data="tableList"
                        style="width: 100%"
                        @selection-change="selectChange"
                >

                    <el-table-column type="selection" width="55"/>
                    <el-table-column
                            label="序号"
                            type="index"
                            width="50"
                            align="center"/>

                    <el-table-column label="照片">
                        <template slot-scope="scope">
                            <img width="50" height="50" :src="scope.row.imgs|filtersImg" alt="">
                            {{scope.row.name}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            v-for="(item, index) in header"
                            :prop="item.prop"
                            :label="item.label"
                            :width="item.width"
                    />
                </el-table>
                <el-pagination
                        background
                        style="float:right;margin-top: 30px;"
                        :page-size="searchForm.pageSize"
                        @current-change="pageChange"
                        layout="prev, pager, next"
                        :total="searchForm.total">
                </el-pagination>
                <div style="clear:both"></div>
            </el-col>
        </el-row>
        <div class="querenaddteam mt20">
            <el-button size="mini" type="primary" @click="addteamok">完成</el-button>
            <el-button size="mini" @click="quxiao">取消</el-button>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapState} from 'vuex'
    import ExamineList from './ExamineList'
    import GroupList from './GroupList'
    import {imgupload, videoupload, fileupload, basefile, baseImgPath} from '@/config/env.js';

    const header = [
        {prop: 'age', label: '年龄'},
        {prop: 'number', label: '号码'},
        {prop: 'goodLocation', label: '擅长位置'},
        {prop: 'sumScoure', label: '综合能力'}
    ]

    export default {
        components: {ExamineList, GroupList},
        data() {
            return {
                header,
                dialog: false,
                groupDialog: false,
                examineDialog: false,
                addPKDialog: false,
                deleteDialog: false,
                tableList: [
                    {
                        "courseId": 0,
                        "createTime": "2019-06-22T16:00:37.843Z",
                        "id": 0,
                        "playerId": 0,
                        "status": 0,
                        "type": 0,
                        "updateTime": "2019-06-22T16:00:37.843Z"
                    }
                ],
                options2: [
                    {label: '未出勤', value: 0},
                    {label: '缺勤', value: 1},
                    {label: '已出勤', value: 2},
                    {label: '未打卡', value: 3},
                ],

                searchForm: {
                    courseId: this.$route.query.id,
                    pageNum: 1,
                    pageSize: 10,
                    total: 0
                },
                searchForm2: {
                    grouping: '',
                    pageNum: 1,
                    pageSize: 5,
                    coachId: sessionStorage.getItem('statusId') ? parseInt(sessionStorage.getItem('statusId')) : 0
                },

                selectList: [],
                list: [],
                total: 0,
                ids: [],
            }
        },
        props: {
            types: {
                type: String,
                default: 0
            }
        },
        computed: {
            dateHeader() {
                const date = this.activeDate
            },

            ...mapState('Login', [
                'userStatus'
            ]),

        },
        methods: {
            ...mapActions('coachTraining', [
                'fetchPlayerList',
                'deletePlayer',
                'fetchSelectList',
                'getKaoQinList',
                'doKaoQin',
                'teamaddPlayer',
            ]),
            quxiao() {
                this.$emit('dialog', false);
            },
            toDetail(scope) {
                const {row: {id}} = scope
                this.$router.push({name: 'playerDetail', query: {id}})
            },
            addteamok() {
                var data = this.selectList
                var ids = []
                for (var i = 0; i < data.length; i++) {
                    ids.push(data[i].id)
                }
                this.ids = ids
                this.getteamaddPlayer()

            },
            getteamaddPlayer() {
                var data = {
                    "ids": this.ids,
                    "teamId": this.$route.query.id,
                    "type": this.types
                }
                this.teamaddPlayer(data).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '增加成功',
                            type: 'success'
                        });
                        this.$emit('dialog2', this.types);
                    }
                })
            },
            onClose() {
                this.groupDialog = false
                this.examineDialog = true
            },

            clickDay(val) {
                this.activeDate = new Date(val).valueOf()
            },

            onSearch() {
                this.searchForm.pageNum = 1
                this.fetchList()
            },

            fetchList() {
                this.searchForm.coachId = this.userStatus.statusId
                for (let i in this.searchForm) {
                    if (i !== 'grouping' && i !== 'name') {
                        this.searchForm[i] = Number(this.searchForm[i])
                    }
                }

                this.fetchPlayerList(this.searchForm).then(res => {
                    const {code, data: {list, total}} = res
                    if (code === 200) {
                        this.tableList = list || []
                        this.searchForm.total = Number(total)
                    }
                })
            },

            selectChange(val) {
                this.selectList = val
                console.log(val);
                this.$emit('selectPlayer', val)
            },

            pageChange(val) {
                this.searchForm.pageNum = val
                this.fetchList()
            },

            onKaoQin(playerId, type) {
                this.fetchKaoQin(playerId, type)
            },
            onKaoQin2(type) {
                var data = this.selectList
                var data3 = []
                for (var i = 0; i < data.length; i++) {
                    data[i].type = type
                    let data2 = {
                        "courseId": Number(this.$route.query.id),
                        "playerId": data[i].id,
                        "type": type
                    }
                    data3.push(data2)
                }
                this.doKaoQin(data3).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.searchForm.pageNum = 1
                        this.fetchList()
                    }
                })
            },

            fetchKaoQin(playerId, type) {
                var data2 = [{
                    "courseId": Number(this.$route.query.id),
                    "playerId": playerId,
                    "type": type
                }]
                this.doKaoQin(data2).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.searchForm.pageNum = 1
                        this.fetchList()
                    }
                })
            },

            getSelect() {
                this.fetchSelectList({type: 'PG'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.options = list || []
                    }
                })
            },
        },

        created() {
            this.fetchList()
            this.getSelect()
        },
        filters: {
            filtersoption: function (e, data) {
                console.log(e);
                console.log(data);
                for (var i = 0; i < data.length; i++) {
                    if (e == data[i].value) {
                        console.log(data[i].label);
                        return data[i].label
                    }
                }
            },
            filtersImg: function (img) {
                return basefile + img
            },
        },

    }
</script>

<style scoped>
    .titleBackground {
        padding: 10px;
        background: #f5f7fa;
        border: 1px solid #f7f7f7;
    }
</style>

<style>
    .wh_content_all[data-v-2ebcbc83] {
        background-color: #2d64b3;
    }

    .wh_content_item .wh_isToday[data-v-2ebcbc83] {
        background: #254d87;
    }

    .wh_content_item .wh_chose_day[data-v-2ebcbc83] {
        background: #254d87;
    }

    .title {
        background: none;
        border: none;
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .inDetail {
        cursor: pointer;
        color: #2d64b3;
    }

    .SBBZ {
        color: #c60818;
    }

    .querenaddteam {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }

    .mt20 {
        margin-top: 20px;
    }
</style>



